function $(a){
    return document.querySelector(a);
}
// 隐藏字数
function str(b){
    let s='';
    let length = 5;
    if(b.length>=length){
    for(let i = 0 ; i<length;i++){
        s+=b[i];
    }
    s+='...';
}else{
    for(let i = 0 ; i<b.length;i++){
        s+=b[i];
    }
}
    return  s;
}

// 视频分类
function typeAll(){
(function(){
    axios({
        method: 'get',
        url: '/type/s',
    }).then(function(data){
    var list =data.data.data.data;
    for(let i= 0;i<26;i++){
        $('.video-type').innerHTML+=` <span><p>${list[i]}</p></span>`;
    }
    // 电影被选中
    var p1 =$('.video-type').querySelectorAll('span')[0].querySelector('p');
    p1.className='span1'
    var spans = $('.video-type').querySelectorAll('span')
    for(let i = 0;i<spans.length;i++){
        spans[i].onclick=function(){
        for(let j = 0;j<spans.length;j++){
            spans[j].querySelector('p').className=''
        }
        spans[i].querySelector('p').className='span1'
        let videotype = this.querySelector('p').innerHTML
           console.log(videotype);
        if(videotype =='电影'){
            movieAll()
        }else if(videotype=='电视剧'){
            teleplay();
        }
        if($('.video-type').querySelectorAll('span')[0].querySelector('p').className!='span1'){
            $('.movie-type-all').style.display='none'
        }else{
            $('.movie-type-all').style.display=''
        }

    }
    }

    var x=1;
    $('.more').onclick=function(){
        x++;
        $('.video-type-all').style.height=`${x%2==0?'100px':'50px'}`
        $('.more').innerHTML=`${x%2==0?'收起':'更多'}`;
        $('.arrow').style.transform =`${x%2==0?'rotate(180deg)':''}`;
    }
    }).catch(err=>{
        console.log(err);
    })
})();
// 地区分类
(function(){
    axios({
        method: 'get',
        url: '/type/areaTags',
    }).then(function(data){
    var list =data.data.data.data;
    for(let i= 0;i<list.length;i++){
        $('.area-type').innerHTML+=` <span><p>${list[i]}</p></span>`;
    }
    }).catch(err=>{
        console.log(err);
    })
})();

// 资费情况
(function(){
    axios({
        method: 'get',
        url: '/type/whetherFree',
    }).then(function(data){
    var list =data.data.data.data;
    for(let i= 0;i<list.length;i++){
        $('.whetherFree-type').innerHTML+=` <span><p>${list[i]}</p></span>`;
    }
    }).catch(err=>{
        console.log(err);
    })
})();

// 年份标签
(function(){
    axios({
        method: 'get',
        url: '/type/yearTags',
    }).then(function(data){
    var list =data.data.data.data;
    for(let i= 0;i<list.length;i++){
        $('.year-type').innerHTML+=` <span><p>${list[i].replace('_','')}</p></span>`;
    }
    }).catch(err=>{
        console.log(err);
    })
})();
// 电影分类
(function(){
    axios({
        method: 'get',
        url: 'type/movieTypeTags',
    }).then(function(data){
    var list =data.data.data.data;
    for(let i= 0;i<list.length;i++){
        $('.movie-type').innerHTML+=` <span><p>${list[i]}</p></span>`;
    }

       // 电影被选中
       var p1 =$('.movie-type').querySelectorAll('span')[0].querySelector('p');
       p1.className='span1'
       var spans = $('.movie-type').querySelectorAll('span')
       for(let i = 0;i<spans.length;i++){
           spans[i].onclick=function(){
           for(let j = 0;j<spans.length;j++){
               spans[j].querySelector('p').className=''
           }
           let movietype = this.querySelector('p').innerHTML
           console.log(movietype);
           spans[i].querySelector('p').className='span1'
           if(movietype == '电影类型'){
            movieAll()
           }else{
           movie(movietype)
           }
       }
       }
    }).catch(err=>{
        console.log(err);
    })
})();
}
typeAll();
// 电视剧
function teleplay(){
    axios({
        method: 'get',
        url: '/teleplay/MoreTV',
    }).then(function(data){
        $('.panel').innerHTML=''
    var list =data.data.data.data;
    console.log(list);
    for(let i = 0 ; i< list.length;i++){
        $('.panel').innerHTML+=`<li class="panel-li">
        <div class='add-panel'>
            <div class="panel-div">
                <a href="/play?${list[i].videoId}" class='aplus'>
                    <img src="${list[i].videoPhoto==null?'#':list[i].videoPhoto}" alt="">
                    <span class='pack-br'><span class='mod-spans'>10期全</span></span>
                </a>
            </div>
            <div class='box-list'>
                <div class='box-title'>
                    <a href="#">
                        <p>${list[i].videoName}</p>
                    </a>
                </div>
                <div class="box-sub-title">${list[i].videoName}</div>
            </div>
        </div>
        <!-- 鼠标悬停上边里面的内容会改变 -->
        <div class='hovers'>
            <div class='hover-link'>
                <a href="/play" class='hover-a'>
                    <div class='qy-mod-hover'><img src="/publics/front-stage/img/pic1.avif" class='hover-mod-img' alt=""></div>
                    <div class='qy-hover-tr'><img src="/publics/front-stage/img/self.png" alt=""></div>
                </a>
            </div>
            <div class='hover-wrap'>
                <p class="hover-main">
                    <a href="#" class='hover-eight'>八角亭迷雾</a>
                </p>
                <p class='hover-sub'>类型:<span>悬疑/偶像/穿越</span></p>
                <p class='hover-play'>主演:<span>曾之乔/傅孟柏/柯桂艳</span></p>
                <p class="hover-story">${str(list[i].introduction)}</p>
            </div>
        </div>
    </li> `
    }
    }).catch(err=>{
        console.log(err);
    })
    }
// 电影
function movieAll(){
    axios({
        method: 'get',
        url: '/movie/hotList',
    }).then(function(data){
        $('.panel').innerHTML=''
    var list =data.data.data.data;
    console.log(list);
    for(let i = 0 ; i< list.length;i++){
        $('.panel').innerHTML+=`<li class="panel-li">
        <div class='add-panel'>
            <div class="panel-div">
                <a href="/play?${list[i].videoId}" class='aplus'>
                    <img src="${list[i].videoPhoto==null?'#':list[i].videoPhoto}" alt="">
                    <span class='pack-br'><span class='mod-spans'>10期全</span></span>
                </a>
            </div>
            <div class='box-list'>
                <div class='box-title'>
                    <a href="#">
                        <p>${list[i].videoName}</p>
                    </a>
                </div>
                <div class="box-sub-title">${list[i].videoName}</div>
            </div>
        </div>
        <!-- 鼠标悬停上边里面的内容会改变 -->
        <div class='hovers'>
            <div class='hover-link'>
                <a href="/play" class='hover-a'>
                    <div class='qy-mod-hover'><img src="/publics/front-stage/img/pic1.avif" class='hover-mod-img' alt=""></div>
                    <div class='qy-hover-tr'><img src="/publics/front-stage/img/self.png" alt=""></div>
                </a>
            </div>
            <div class='hover-wrap'>
                <p class="hover-main">
                    <a href="#" class='hover-eight'>八角亭迷雾</a>
                </p>
                <p class='hover-sub'>类型:<span>悬疑/偶像/穿越</span></p>
                <p class='hover-play'>主演:<span>曾之乔/傅孟柏/柯桂艳</span></p>
                <p class="hover-story">${str(list[i].introduction)}</p>
            </div>
        </div>
    </li> `
    }
    }).catch(err=>{
        console.log(err);
    })
}
movieAll()
function movie(a){
    axios({
        method: 'get',
        url: '/suspenseVideo',
        params:{
            videoTags:a
        }
    }).then(function(data){
        $('.panel').innerHTML='';
    var list =data.data.data.data;
    console.log(list.length);
    for(let i = 0 ; i< list.length;i++){
        $('.panel').innerHTML+=` <li class="panel-li">
        <div class='add-panel'>
            <div class="panel-div">
                <a href="/play?${list[i].videoId}" class='aplus'>
                    <img src="${list[i].videoPhoto}" alt="">
                    <span class='pack-br'><span class='mod-spans'>10期全</span></span>
                </a>
            </div>
            <div class='box-list'>
                <div class='box-title'>
                    <a href="#">
                        <p>${list[i].videoName}</p>
                    </a>
                </div>
                <div class="box-sub-title">${str(list[i].introduction)}</div>
            </div>
        </div>
        <!-- 鼠标悬停上边里面的内容会改变 -->
        <div class='hovers'>
            <div class='hover-link'>
                <a href="/play" class='hover-a'>
                    <div class='qy-mod-hover'><img src="/publics/front-stage/img/pic1.avif" class='hover-mod-img' alt=""></div>
                    <div class='qy-hover-tr'><img src="/publics/front-stage/img/self.png" alt=""></div>
                </a>
            </div>
            <div class='hover-wrap'>
                <p class="hover-main">
                    <a href="#" class='hover-eight'>八角亭迷雾</a>
                </p>
                <p class='hover-sub'>类型:<span>悬疑/偶像/穿越</span></p>
                <p class='hover-play'>主演:<span>曾之乔/傅孟柏/柯桂艳</span></p>
                <p class="hover-story">顽皮可爱的霸王龙小分队成员图图、刷子、大龙和二龙总在幼儿园搞一些让家长和小朋友们头疼的...</p>
            </div>
        </div>
    </li>`
    }
    }).catch(err=>{
        console.log(err);
    })
}

// 鼠标放上去内容会改变
var mod1 = document.getElementsByClassName('add-panel')
var mod2 = document.getElementsByClassName('hovers')
var modLi=document.getElementsByClassName('panel-li')
console.log(modLi)
for(let i=0,len=modLi.length;i<len;i++){
    modLi[i].addEventListener('mouseover',function(){
        mod1[i].style.display='none';
        mod2[i].style.display='block';
    })
    modLi[i].addEventListener('mouseout',function(){
        mod1[i].style.display='block';
        mod2[i].style.display='none';
    })
}